<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" media="all" href="resources/css/style-console.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="resources/js/jquery-1.10.2.js"></script>
<script src="resources/js/poll.js"></script>
<script src="resources/js/upload.js"></script>
<script src="resources/js/buttons.js"></script>
<title>Console - AirPi</title>
</head>
<body class="padding">
	<!-- Playlist panel on the left -->
	<section id="playlist">
		<h2>PLAYLIST</h2>
		<ul>
			<!-- contains li made of div and a (if admin) -->
		</ul>
	</section>

	<!-- Users list panel on the right -->
	<section id="users">
		<div id="top-buttons">
			<c:if test="${user.isAdmin()}">
				<a href="settings">SETTINGS</a>
			</c:if>
			<a href="logout">LOGOUT</a>
		</div>
		<div id="lists">
			<h2>ADMIN</h2>
			<ul></ul>

			<h2>GUESTS</h2>
			<ul></ul>
		</div>
	</section>

	<!-- Centered section on screen -->
	<section id="main">
		<form action="${stream_ip}" method="post" enctype="multipart/form-data">
			<input type="file" name="file" id="inputFile" />
			<input type="submit" value="+ Upload file" id="submitFile" onclick="return sendFile(this);" />
			<progress id="progress" value="0" max="100"></progress>
		</form>
		<h3>
			<span class="success">&nbsp;</span><span class="fail">&nbsp;</span>
		</h3>
		<form action="<c:url value="console" />" method="post">
			<input type="text" name="youtube_url" id="inputLink" placeholder="Youtube URL" />
			<input type="submit" value="Play!" id="submitLink" onclick="return sendLink(this);" />
		</form>

		<c:if test="${user.isAdmin()}">
			<div id="bottom_buttons">
			    <h3 class="buttons_fail"></h3>
				<div id="controls">
					<a id="play_link" href="" title="" onclick="return doAction(this);">
						<img id="play_button" src="" alt="" />
					</a>
					
					<a href="console?action=next" title="Next track" onclick="return doAction(this);">
					   <img src="resources/images/next.png" alt="next" />
					</a>
					
					<a href="console?action=stop" title="Stop the current media" onclick="return doAction(this);">
					   <img src="resources/images/stop.png" alt="stop" />
					</a>
					
					<a href="controls" title="Open the controls" onClick="return openControls();">
					   <img	src="resources/images/controls.png" alt="Advanced controls" />
					</a>
				</div>
				Guests' password:<br /><span id="pwd"></span>
			</div>
		</c:if>
	</section>
</body>
</html>